<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<title>添加线路</title>
	<link rel="stylesheet" href="/css/layui.css">
<link rel="stylesheet" href="/scriptZIP/layui.min.css">
	<link rel="stylesheet" href="/css/item.css">
	<style>
		.all-info {
			padding: 0 10%;
		}

		.layui-row {
			margin-top: 50px;
		}

		.offer {
			width: 90px;
			height: 35px;
			background: #0086b6;
			color: white;
			text-align: center;
			line-height: 35px;
			font-size: 16px;
			border-radius: 4px;
		}

		.return {
			width: 80px;
			height: 35px;
			background: #0086b6;
			color: white;
			text-align: center;
			line-height: 35px;
			margin-top: -35px;
			margin-left: 130px;
			font-size: 16px;
			border-radius: 4px;
		}

		.checkout_state {
			margin-left: 20px;
		}

		.choose,
		.add-site {
			border-radius: 3px;
			color: white;
			padding: 10px 2px;
			font-size: 12px;
			display: inline-block;
			background-color: #40B9E3;
		}

		.add-site {
			margin-left: 156px;
			margin-bottom: 10px;
			cursor: pointer;
		}

		.alert {
			position: fixed;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			border: none;
			z-index: 1;
			background-color: rgba(0, 0, 0, 0.5);
			text-align: center;
		}

		.map {
			width: 96%;
			height: 92%;
			display: inline-block;
			overflow: hidden;
		}

		#map {
			height: calc(100% + 21px);
		}

		.alert button {
			width: 100px;
			text-align: center;
			padding: 5px;
		}

		.alert input {
			width: 70%;
			height: 30px;
			position: absolute;
			top: 1%;
			left: 15%;
			padding-left: 10px;
		}

		[v-show],
		[v-if] {
			display: none;
		}
	</style>
</head>

<body>


	<div class="layui-row" id="vue-root">
		<div class="all-info">
			<div class="layui-form-item">
				<label class="layui-form-label">线路名称</label>
				<div class="layui-input-block">
					<input name="name" autocomplete="off" placeholder="请输入线路名称" class="layui-input" v-model="item.name"
						v-validate="'required'" data-vv-name="名称">
					<div class="checkout_state" v-text="err('name')"></div>
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">起点站</label>
				<div class="layui-input-block">
					<input name="start" autocomplete="off" placeholder="请输入起点站名称" class="layui-input"
						v-model="stop0.name" v-validate="'required'">
					<div class="choose" @click="choose(stop0)">选取坐标</div>
					<div class="checkout_state" v-text="err0"></div>
				</div>
			</div>


			<template v-for="(stop,index) in stops">
				<div class="layui-form-item">
					<label class="layui-form-label">经停站</label>
					<div class="layui-input-block">
						<input autocomplete="off" placeholder="请输入经停站名称" class="layui-input" v-validate="'required'"
							:name="'stop'+index" v-model="stop.name">
						<div class="choose" @click="choose(stop)">选取坐标</div>
						<div class="choose" @click="delStop(index)" style="background-color: brown;">删除此站</div>
						<div class="checkout_state" v-text="errs[index]"></div>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">到站耗时</label>
					<div class="layui-input-block">
						<input autocomplete="off" placeholder="请输入上一站到本站所需时间" class="layui-input"
							v-model.number="item.durations[index]" v-validate="'required'" :name="'duration'+index"
							data-vv-name="到站耗时" type="number">分钟
						<div class="checkout_state" v-text="err('duration'+index)"></div>
					</div>
				</div>
			</template>

			<div class="add-site" @click="addStop">新增经停站</div>

			<div class="add-site" @click="view">查看线路</div>


			<div class="layui-form-item">
				<div class="layui-input-block">
					<div class="offer" @click="submit">立即提交</div>
					<div class="return" onclick="history.back()">取消</div>
				</div>
			</div>
		</div>

		<div class="alert" v-show="mapShow">
			<div class="map">
				<div id="map"></div>
			</div>

			<div></div>
			<button @click="mapShow=false">确定</button>
			<input placeholder="请输入要搜索的地点" id="searchInput">
		</div>

	</div>

	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>


	<script src="/scriptZIP/axios.min.js"></script>

	<script src="/js/common.js"></script>
	<script src="/js/item.js"></script>


	<script>
		window._AMapSecurityConfig = {
			serviceHost: location.origin + '/_AMapService'
		}

		var positionPicker, infoWindow, driving;

		var app = new Vue(merge({
			data: {
				mapShow: false,
				err0: null,
				errs: [],
				stop0: {
					lng: null,
					lat: null
				},
				stops: [],
				item: {
					durations: [],
					schoolId: top_params().id
				},
				toSet: null,
				url: '/pc/route'
			},
			methods: {
				formatData: function (data) {
					this.stop0 = data.stops.shift();
					this.stops = data.stops;
				},
				choose: function (stop) {
					this.toSet = stop;
					this.mapShow = true;
					if (stop.lng && stop.lat) positionPicker.start([stop.lng, stop.lat]);
				},
				addStop: function () {
					this.item.durations.push(null);
					this.errs.push(null);
					this.stops.push({
						lng: null,
						lat: null
					});
				},
				fillData: function () {
					if (!this.check()) {
						alert('请检查是否所有站点都已选取坐标');
						throw '';
					}
					if (this.stops.length == 0) {
						alert('线路至少需要2个站点');
						throw '';
					}
					this.item.stops = [this.stop0].concat(this.stops);

				},
				view: function () {
					if (this.stops.length == 0) {
						alert('只有一个站');
						return;
					}

					if (!this.check()) {
						alert('请检查是否所有站点都已选取坐标');
						return;
					}

					function toLnglat(stop) {
						return [stop.lng, stop.lat];
					}

					var stops = this.stops.map(toLnglat);
					this.mapShow = true;
					driving.search(toLnglat(this.stop0), stops.pop(), {
						waypoints: stops
					}, function (status, result) {
						if (status !== 'complete') {
							alert('出错了');
						}
					});
				},
				check: function () {
					function notnull(stop) {
						return typeof stop.lng == 'number' && typeof stop.lat == 'number';
					}

					return notnull(this.stop0) && this.stops.every(notnull);
				},
				delStop: function (index) {
					this.stops.splice(index, 1);
				}
			},
			watch: {
				mapShow: function (newValue, oldValue) {
					if (newValue) {
						document.getElementById('searchInput').focus();
					} else {
						infoWindow.close();
						positionPicker.stop();
						driving.clear();
					}
				}
			}
		}));

		onload = function () {


			var map = new AMap.Map('map');

			AMapUI.loadUI(['misc/PoiPicker', 'misc/PositionPicker', 'overlay/SimpleInfoWindow'], function (PoiPicker, PositionPicker, SimpleInfoWindow) {
				new PoiPicker({
					input: 'searchInput'
				}).on('poiPicked', function (poiResult) {
					var a = poiResult.item.location;
					a = [a.lng, a.lat];
					map.setCenter(a);
					map.setZoom(18);
					positionPicker.start(a)
					app.toSet.lng = a[0];
					app.toSet.lat = a[1];
				});

				positionPicker = new PositionPicker({
					mode: 'dragMarker',
					map: map
				});

				positionPicker.on('success', function (positionResult) {
					var lnglat = positionResult.position;
					lnglat = [lnglat.lng, lnglat.lat];
					infoWindow.setInfoBody(positionResult.address);

					if (infoWindow.getIsOpen()) {
						infoWindow.setPosition(lnglat);
					} else {
						infoWindow.open(map, lnglat);
					}

					map.setCenter(lnglat);
				});

				positionPicker.on('fail', function (positionResult) {
					alert('海上或海外无法获得地址信息');
				});

				infoWindow = new SimpleInfoWindow({
					infoTitle: '地址',
					offset: new AMap.Pixel(0, -20)
				});

			});

			map.on('click', function (e) {
				e = e.lnglat;
				e = [e.getLng(), e.getLat()];
				map.setCenter(e);
				positionPicker.start(e);
				app.toSet.lng = e[0];
				app.toSet.lat = e[1];
			});

			driving = new AMap.Driving({
				map: map
			});
		}

	</script>
	<script src="https://webapi.amap.com/maps?v=2.0&key=d3d68f711955b0418e1d9c6aa88b1d39&plugin=AMap.Driving"></script>
	<script src="https://webapi.amap.com/ui/1.1/main.js"></script>
</body>

</html>